<template>
  <div>
    <!-- <div>消息：{{msg}}</div>
    <Button color="primary" @click="getServerMsg">点我获取服务端消息</Button>-->
    <!-- <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-card class="box-card">
          <el-input placeholder="我是一个 input"></el-input>
        </el-card>
      </el-col>
    </el-row>-->
    <el-collapse-transition>
      <el-card class="box-card mb-20" v-show="searchState">
        <h3>检索</h3>
        <el-row :gutter="10">
          <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" class="pb-5">
            <el-input  placeholder="请输入 用户名称"></el-input>
          </el-col>
          <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" class="pb-5">
            <el-input  placeholder="请输入 用户登录名称"></el-input>
          </el-col>
          <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" class="pb-5">
            <el-input  placeholder="请输入 用户名称"></el-input>
          </el-col>
          <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" class="pb-5">
            <el-input  placeholder="请输入 用户登录名称"></el-input>
          </el-col>
          <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" class="pb-5">
            <el-input  placeholder="请输入 用户名称"></el-input>
          </el-col>
          <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" class="pb-5">
            <el-input  placeholder="请输入 用户登录名称"></el-input>
          </el-col>
        </el-row>
        <div class="mt-10">
          <el-button type="primary" plain>检索</el-button>
          <el-button type="primary" plain>重置</el-button>
          <el-button type="danger" plain @click="searchState=!searchState">关闭</el-button>
        </div>
      </el-card>
    </el-collapse-transition>
    <!--表格-->
    <el-card class="box-card" body-style="padding:15px;">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18" class="pb-5">
          <el-button type="primary" icon="el-icon-plus" @click="centerDialogVisible=true">添加</el-button>
          <el-button type="primary" icon="el-icon-edit" @click="centerDialogVisible=true">查看/编辑</el-button>
          <el-button type="danger" icon="el-icon-delete" @click="centerDialogVisible=true">删除</el-button>
          <el-button type="primary" icon="el-icon-search" @click="searchState=!searchState">检索(收/展)</el-button>
        </el-col>
        <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" class="pb-5 text-right">
          <el-button type="primary" icon="iconfont icon-excel">&nbsp;导出 Excel</el-button>
          <el-button type="primary" icon="iconfont icon-dayin">&nbsp;打印</el-button>
        </el-col>
      </el-row>
      <!--表格控件-->
      <div style="height:calc(100vh - 260px)">
        <el-table :data="tableData" height="100%">
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="date" label="日期"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
      </div>
      <!--分页控件-->
      <div class="pt-5">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[20, 100, 500, 1000]"
          :page-size="20"
          layout="prev, pager, next, total, sizes"
          :total="100"
        ></el-pagination>
      </div>
    </el-card>
    <!--表单-->
    <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center custom-class="hzy-dialog">
      <span>需要注意的是内容是默认不居中的</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "User",
  data() {
    return {
      searchState: false,
      currentPage4: 1,
      centerDialogVisible: false,
      msg: "我是Home",
      tableData: []
    };
  },
  mounted() {
    for (var i = 0; i < 20; i++) {
      this.tableData.push({
        date: "2016-05-0" + i,
        name: "王小虎",
        address: "上海市普陀区金沙江路 1516 弄"
      });
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    getServerMsg() {
      axios.post("https://192.168.3.22:10002/" + "api/home/get", {}).then(
        response => {
          if (response != undefined) {
            console.log(response.data);
            this.msg = response.data.msg;
          }
        },
        err => {
          // console.log("err", err);
        }
      );
    }
  }
};
</script>

